// web/src/components/learn/preview.tsx
'use client';
import React, {useMemo} from 'react';

import 'react-quill/dist/quill.bubble.css'
import dynamic from "next/dynamic";

interface Props {
    value: string;
    className?: string;
}

const Preview = ({value, className}: Props) => {
    // nextjs在服务端渲染一次, 在客户端渲染一次, 使用ssr:false防止服务端的渲染客户端组件导致错误
    const ReactQuill = useMemo(() => dynamic(
        () => import('react-quill'), {ssr: false},
    ), [])

    return (
        // <ReactQuill
        //     className={`react-quill-preview ${className}`}
        //     theme={'bubble'}
        //     defaultValue={value}
        //     // 虽然可以复制文字, 但是点击toolbar item依然会改变内容
        //     onChange={() => {
        //     }}
        //     readOnly // 拖动无法选中文字
        // />
        <div className={`prose ${className} pointer-events-auto`}
             dangerouslySetInnerHTML={{__html: value}}>
        </div>
    );
};

export default Preview;
